<template>
  <div class="common-layoutCom">
    <ElContainer style="height: 100%">
      <div
        id="asideIdChildern"
        :style="{ width: widthData.width + 'px' }"
        ref="container"
        class="common-layoutCom-left"
      >
        <ElAside>
          <LeftTree :data="data" :isCommpand="isCommpand" />
        </ElAside>
      </div>
      <ElMain class="common-layoutCom-right" v-if="rightTableShow">
        <rightTable :data="data" :regionCode="regionCode" :rightTreeData="rightTreeData" />
      </ElMain>
    </ElContainer>
  </div>
</template>

<script setup lang="ts">
  import rightTable from './rightTable.vue';
  import { useRoute } from 'vue-router';
  const rightTreeData = ref<Namespace.unitTree>();
  const rightTableShow = ref<boolean>(false);
  const Route = useRoute();
  interface widthType {
    width: number;
  }
  const widthData: widthType = reactive({
    width: 300,
  });
  const data = reactive<any>({
    dataId: {},
    regionId: '',
    update: 0,
    selected: null,
  });
  const isCommpand = ref<boolean>(false);
  const props = defineProps({
    data: {
      type: Object,
      default: () => {},
    },
    regionCode: {
      type: Number,
    },
  });
  const sendGrandson = async (value) => {
    rightTreeData.value = value;
  };
  provide('sendHandle', sendGrandson);
  onMounted(() => {
    updateWidth();
    switch (Route.name) {
      case 'commandPages':
        isCommpand.value = true;
        break;
    }
  });
  const updateWidth = () => {
    let resize = document.getElementById('asideIdChildern') as HTMLElement;
    resize.onmousedown = function (e) {
      // resize.style.background = '#818181';
      let startX = e.clientX;
      // resize.left = resize.offsetLeft;
      document.onmousemove = function (e) {
        let endX = e.clientX;
        let moveLen = endX - startX;
        startX = endX;
        widthData.width += moveLen;
      };
      document.onmouseup = function () {
        // 颜色恢复
        resize.style.background = '';
        document.onmousemove = null;
        document.onmouseup = null;
      };
      return false;
    };
  };
  watch(
    rightTreeData,
    (value: any) => {
      if (value.id) {
        rightTableShow.value = true;
      } else {
        rightTableShow.value = false;
      }
    },
    { deep: true },
  );
  watch(
    props,
    (value) => {
      data.dataId = value.data;
      data.regionId = value.regionCode;
      rightTableShow.value = false;
    },
    { deep: true, immediate: true },
  );
</script>

<style lang="scss" scoped>
  .common-layoutCom {
    height: $height;
    &-right {
      padding: 0;
      width: 300px;
    }
    &-left {
      height: $height;
      width: 300px;
      z-index: 99;
      background-color: var(--el-color-white);
    }
    :deep(.el-aside) {
      height: $height;
      width: $width;
      overflow: visible;
    }
  }
</style>
